onload=function(){
    let  lis=document.querySelectorAll(".classification_div>ul>li");
     lis.forEach(function(v,i){
      lis[i].onmouseover=function(){
        lis[i].children[1].style.width="578px";
        lis[i].children[1].style.height="490px";
        lis[i].children[1].style.border="1px solid red";
      }
      lis[i].onmouseout=function(){
        lis[i].children[1].style.width="0px";
        lis[i].children[1].style.height="0px";
        lis[i].children[1].style.border="none";
      }
     }) 
        //    这是e_book 区域的js代码
        let as=document.querySelectorAll("#e_book_img a");
        let spans=document.querySelectorAll("#e_book_img a span");
        let colorarr=["red","orange","yellow","blue","purple"];
       let bgc;
       as.forEach(function(v,i){
         as[i].onmouseover=function(){
             bgc=as[i].style.backgroundColor;
            console.log(bgc)
            as.forEach(function(v2,i2){
                 v2.children[0].style.width="0px";
              
             })
           
             as[i].children[0].style.width="140px"
             as[i].style.backgroundColor=colorarr[i];
             as[i].children[0].style.backgroundColor=colorarr[i];
         }


         as[i].onmouseout=function(){
            as[i].children[0].style.width="0px";
            as[i].style.backgroundColor=bgc;
             as[i].children[0].style.backgroundColor=bgc;
         }


       })
    //    这是右边定位图片区域
    let smalldiv=document.querySelector("#brought_center");
    let  img1=document.querySelector("#brought_center .img1");
    
    let bigdiv=document.querySelector(".quanping");
          
        bigdiv.onclick=function(e){
          
                
            if( bigdiv.style.height==="100%"){
                this.style.height="0%";
                 this.style.width="0%";
                 img1.style.top="40px";
              img1.style.right="39px";
             img1.style.height="100px";
            }else{
                bigdiv.style.height="100%";
               
           bigdiv.style.width="100%";
         
           img1.style.top="200px";
           img1.style.right="712px";
           img1.style.height="200px";
            }
           
            
        // e.stopPropagation();
           
        }
        // bigdiv.addEventListener("click",function(){
       
        //     this.style.height="0%";
        //    this.style.width="0%";
        //     img1.style.top="40px";
        //     img1.style.right="39px";
        //     img1.style.height="100px";
        // })
            //  这是回到顶部区域
            let   roof=document.querySelector("#roof");
              
               roof.onclick=function(){
                    let a=scrollY;
                    
            let      timer=setInterval(function(){
                       a-=20;  
                       window.scrollTo(0,a);  
                       console.log(a)
                       if(a<=0){
                       
                           clearInterval(timer)
                       }
                         
            },20)
           }
             // 这是滚动事件
             window.onscroll=function(){
                var a=scrollY;
                if(a>400){
                    roof.style.display="block";

                }else{
                    roof.style.display="none";
                }
            }

        
 }


 $(function(){
   $(".e_book .e_book_div1 .e_book_ul1") 
   $(".e_book .e_book_div1 h2 span").mouseenter(function(){
        let a=$(this).index();
      $(this).addClass("bgc").siblings().removeClass("bgc");
        $(".e_book .e_book_div1 .e_book_ul1").eq(a).addClass("show").siblings().removeClass("show")
   })

    //   这是look 右边的图书展示区域
   $(".e_book_ol1 li").mouseenter(function(){
    $(this).children("div").css("display","block");
    $(this).children("h3").css("display","none")
    $(this).siblings().children("div").css("display","none")
    $(this).siblings().children("h3").css("display","block")
 })
 
//  这是首页jq代码封装区域
    function employ(jqobj1,jqobj2,s,b){
        jqobj1.mouseenter(function(){
     let index=$(this).index();
      $(this).addClass(s).siblings().removeClass(s)
      jqobj2.eq(index).addClass(b).siblings().removeClass(b)
    })
    }
    employ($(".clothing  #clothingid>h2 span"),$(".clothing  #outdiv"),"bgc","show")
    employ($(".clothing  #outdoorid>h2 span"),$(".clothing  #outdoordiv"),"bgc","show")
    employ($(".clothing  #childrens>h2 span"), $(".clothing  .clothing_div1_small"),"bgc","show")

//  这是固定头部的jq动画代码
$(window).scroll(function(){
    if($(this).scrollTop()>400){
        $("#gudingheader").stop();
        $("#gudingheader").show(20)
        
    }else{
        $("#gudingheader").stop();
        $("#gudingheader").hide(20)
      
    }
})
 
//   这是楼层滚动的jq效果代码

$('#e_book_img a').mouseenter(function(){
     let index=  $(this).index();
   let a=  $(".floor").eq(index).offset().top;
  
  $("html").animate({scrollTop:a})
});




// 这是下面轮播图
 //主轮播图
 $("#bannerInner").tyslide({
    boxh:440,//盒子的高度
    w:1000,//盒子的宽度
    h:400,//图片的高度
    isShow:true,//是否显示控制器
    isShowBtn:true,//是否显示左右按钮
    controltop:0,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
    controlsW:20,//控制按钮宽度
    controlsH:20,//控制按钮高度
    radius:10,//控制按钮圆角度数
    controlsColor:"#d7d7d7",//普通控制按钮的颜色
    controlsCurrentColor:"#ff6600",//当前控制按钮的颜色
    isShowNum:true //是否显示数字
});

//   h这是封装的函数
   function autoplay(object,box_h,box_w,img_h,controlsshow, controls_h,radius1,dqcolor="white",shownumber){
      object.tyslide({
     boxh:box_h,//盒子的高度
    w: box_w,//盒子的宽度
    h:img_h,//图片的高度
    isShow:controlsshow,//是否显示控制器
    isShowBtn:true,//是否显示左右按钮
    controltop:4,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
    controlsW:14,//控制按钮宽度
    controlsH: controls_h,//控制按钮高度
    radius:radius1,//控制按钮圆角度数
    controlsColor:dqcolor,//普通控制按钮的颜色
    controlsCurrentColor:"gray",//当前控制按钮的颜色
    isShowNum:false ,//是否显示数字
});
   }
  //  这是封装后的函数的调用的环节
  // 这是电子书区域的调用
  autoplay($(".e_book_ul1 #slidebox5"),215,331,215,true,2,0,"#fff",);
  // 这是 服装区域的调用
  autoplay($(".clothing .clothing_content_div1 #clothing"),336,428,336,true,2,0,); 
//  这是户外运动的调用
 autoplay($(".clothing .clothing_content_div1  #outdoor"),336,428,336,true,2,0,); 
//    这是童装的调用
 autoplay( $(".clothing .clothing_content_div1  #childrenwear"),336,428,336,true,2,0,);  
 })